import { httpPost } from '@utils/HttpUtil';
import { Input, Button, Typography, message} from 'antd';
import { FC, useState } from 'react';
import TrainProblemExplain from './TrainProblemExplain';
import { getCookie, setCookie } from '@utils/StorageUtil';
const { Text } = Typography;

const TrainProblemBlank:FC<any> = ({problem, refreshProblem, submitTrain}) => {


  const [inputValue, setInputValue] = useState('');

  //记录回答状态
  const [isAnswered, setIsAnswered] = useState(false);

  // 监听输入变化，更新状态
  const handleChange = (e:any) => {
    setInputValue(e.target.value);
  };

  // 提交时获取值
  const handleSubmit = () => {
    if(!isAnswered){
      if(inputValue === "不知道"){
        message.success("已记录为薄弱点，后续系统会重点训练");
        submitTrain("blank", problem.problemId, "false");
      }else{
        var result = httpPost("/userTrain/judgeBlankAnswer", {
          problemId: problem.problemId,
          answer: inputValue
        }).data;
        if(result === true){
          var train = Number.parseInt(getCookie("problemTrain"));
          setCookie("problemTrain", (train + 1).toString());
          message.success("回答正确");
          submitTrain("blank", problem.problemId, "true");
        }else{
          message.error("已记录为薄弱点，后续系统会重点训练");
          submitTrain("blank", problem.problemId, "false");
        }
      }
      setIsAnswered(true);
    }
  };

  if(isAnswered){
    return <TrainProblemExplain problem={problem} refreshProblem={refreshProblem} submitTrain={submitTrain}/>; // 如果已回答，显示答案 
  }

  return (
    <>
      <>
        <div>
          <Text
            type="secondary"
            style={{ cursor: "pointer", fontSize: 18, color: "#52c41a" }}
          >
            请输入你的答案 (如果没有思路，请输入"不知道")
          </Text>
        </div>
        <div style={{ marginTop: 20 }}>
          <Text type="secondary" style={{ cursor: "pointer", fontSize: 16 }}>
            本题考查知识点为：xxx
          </Text>
        </div>
        <div style={{ marginTop: 20 }}>
          <Text type="secondary" style={{ cursor: "pointer", fontSize: 16 }}>
            如果没思路，可以先点击题目下方的提示按钮获取提示信息，可以多点几次
          </Text>
        </div>
        <div style={{ marginTop: 20 }}>
          <Text type="secondary" style={{ cursor: "pointer", fontSize: 16 }}>
            看完提示还没有思路，说明该题考查知识点为薄弱点，直接输入"不知道"，后续系统会着重帮助训练
          </Text>
        </div>
        <div style={{ marginTop: 20 }}>
          <Input
            placeholder=""
            size="large"
            style={{ borderRadius: 8 }}
            value={inputValue}
            onChange={handleChange}
          />
        </div>
      </>

      <Button
        type="primary"
        size="large"
        onClick={handleSubmit}
        style={{
          marginLeft: "20%",
          width: "60%",
          height: 50,
          background: "#52c41a",
          borderColor: "#52c41a",
          borderRadius: 8,
          fontSize: 16,
          marginTop: 120,
        }}
      >
        提交答案
      </Button>
    </>
  );
}

export default TrainProblemBlank;